<template>
	<!-- <template v-if="loading">123</template>
	<template v-else>
		<iframe class="preview-file" :src="ifSrc" ref="previewFileRef" v-if="isFile"></iframe>
	</template> -->
	<div>
		<div v-if="loading" class="preview-file-loading">
			<div class="loading"></div>
			<div>加载中...</div>
		</div>
		<iframe v-else class="preview-file" :src="ifSrc" ref="previewFileRef" v-if="isFile"></iframe>
	</div>
</template>

<script setup>
import { ref, computed } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
const props = defineProps({
	fileList: {
		type: Array,
		required: true,
	},
	modelValue: {
		type: Number,
		default: 0,
	},
})
const emits = defineEmits(["update:modelValue"])
const route = useRoute()
const router = useRouter()
const previewFileRef = ref(null)
const loading = ref(true)
const current = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		emits("update:modelValue", val)
	},
})
const file = computed(() => {
	return props.fileList[current.value] || {}
})
const filename = computed(() => {
	return file.value.fileName
})
const ext = computed(() => {
	return filename.value?.split(".").pop()
})
const applyType = computed(() => {
	switch (ext.value) {
		case "doc":
		case "docx":
			return "application/msword"
		case "xls":
		case "xlsx":
			return "application/vnd.ms-excel"
		case "ppt":
		case "pptx":
			return "application/vnd.ms-powerpoint"
		case "pdf":
			return "application/pdf"
		case "jpg":
		case "jpeg":
			return "image/jpeg"
		case "png":
			return "image/png"
		case "gif":
			return "image/gif"
		case "svg":
			return "image/svg+xml"
		case "bmp":
			return "image/bmp"
		case "zip":
			return "application/zip"
		case "rar":
			return "application/x-rar-compressed"
		case "7z":
			return "application/x-7z-compressed"
		case "mp3":
			return "audio/mpeg"
		case "mp4":
			return "video/mp4"
		default:
			return "text/plain"
	}
})
const isImage = computed(() => {
	return ["jpg", "jpeg", "png", "gif", "bmp", "svg"].includes(ext.value)
})
const isVideo = computed(() => {
	return ["mp4"].includes(ext.value)
})
const isAudio = computed(() => {
	return ["mp3"].includes(ext.value)
})
const isZip = computed(() => {
	return ["zip", "rar", "7z"].includes(ext.value)
})
const isFile = computed(() => {
	// !isImage.value &&
	return !isVideo.value && !isAudio.value && !isZip.value
})
const ifSrc = ref("")
async function getDetails() {
	if (!file.value.id) {
		return
	}
	if (isFile.value) {
		const result = await postAxios(
			"/knowledge/kbBasicUser/fileShow",
			{
				bId: route.query.id,
				vides: [file.value.id],
			},
			{
				blob: true,
			}
		)
		loading.value = false
		if (result) {
			const blob = new Blob([result], { type: applyType.value })
			// previewFileRef.value.src = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
			ifSrc.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
		}
	}
}

watchEffect(() => {
	if (~current.value && file.value.id) {
		loading.value = true
		getDetails()
	}
})
//
</script>

<style lang="scss" scoped>
.preview-file {
	width: 100%;
	max-height: 100vh;
	height: 1000px;
	border: 0;
}
.preview-file-loading {
	width: 100%;
	max-height: 100vh;
	height: 1000px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 0;
	background-color: #d4d4d7;
	.loading {
		width: 45px;
		height: 45px;
		display: inline-block;
		padding: 0px;
		border-radius: 100%;
		border: 5px solid;
		border-top-color: rgba(41, 114, 250, 1);
		border-bottom-color: rgba(41, 114, 250, 0.1);
		border-left-color: rgba(41, 114, 250, 1);
		border-right-color: rgba(41, 114, 250, 0.1);
		animation: loading-animation 1s ease-in-out infinite;
	}

	@keyframes loading-animation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
}
</style>
